<template>
    <div class="card" @click="toDetail">
        <div class="pic">
            <img v-if="props.data.pic" class="imgPic" :src="baseURL+props.data.pic" alt="">
            <img v-else src="../assets/images/logo.png" alt="">
        </div>

        <div class="title">{{ props.data.title }}</div>
    </div>
</template>
  
<script setup>
import { defineProps, ref } from 'vue'
import { baseURL } from '@/config/baseURL'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps(['data'])

const toDetail = () => {
   router.push({path:'/detail/'+props.data.id})
}

</script>
  
<style scoped lang='less'>
.card {
    width: 200px;
    cursor: pointer;
    margin-right: 30px;
    
    .pic {
        width: 200px;
        height: 225px;
        overflow: hidden;
        box-shadow: 0 0 0 2px #dcdcdc41;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .imgPic {
            width: 99%;
        }

    }

    div {
        margin-top: 10px;
        color: #383838;
    }

    .title{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .author{
        color:#666;
    }
}
</style>
  